<template>
		<!-- 1、创建容器 -->
		<div class="contentBox">
				<div class="btnBox">
						<el-button @click="clickZoom(-0.5)">缩 放0.5</el-button>
						<el-button @click="clickZoom(0.5)">放 大0.5</el-button>
						<el-button @click="clickTranslate">平 移</el-button>
				</div>
				<div id="index01">

				</div>
		</div>
</template>

<script>
import {onMounted, defineComponent} from 'vue'
import {Graph} from '@antv/x6';

/**
 * 2、准备数据
 */
const data = {
		/**
		 * 2.1、准备节点的数据
		 */
		nodes: [
				{
						id: 'node1',
						shape: 'rect', // 可以使用多种基础图形
						x: 100,
						y: 200,
						width: 80,
						height: 40,
						label: '节点1',
				},
				{
						id: 'node2', // String，节点的唯一标识
						shape: 'circle', // 使用 ellipse 渲染
						x: 250,
						y: 200,
						width: 80,   // Number，可选，节点大小的 width 值
						height: 40,  // Number，可选，节点大小的 height 值
						label: '节点2',
				},
				{
						id: 'node3', // String，节点的唯一标识
						shape: 'ellipse', // 使用 ellipse 渲染
						x: 400,
						y: 200,
						width: 80,   // Number，可选，节点大小的 width 值
						height: 40,  // Number，可选，节点大小的 height 值
						label: '节点3',
				},
				{
						id: 'node4',
						shape: 'polygon',
						x: 550,
						y: 200,
						width: 80,
						height: 40,
						label: '节点4',
						attrs: {
								body: {
										fill: '#efdbff',
										stroke: '#9254de',
										refPoints: '0,10 10,0 20,10 10,20',
								},
						},
				}
		],

		/**
		 * 2.2、定义边的数据
		 */
		edges: [
				{
						shape: 'edge',
						source: 'node1',
						target: 'node2'
				},
				{
						shape: 'double-edge',
						source: 'node2',
						target: 'node3'
				},
				{
						shape: 'shadow-edge',
						source: 'node3',
						target: 'node4'
				}
		]
}
export default defineComponent({
		setup() {
				let graph = {}, container = {};

				/**
				 * 3、进行画布的渲染
				 * 只能在onMounted生命周期里面
				 */
				onMounted(() => {
						container = document.getElementById('index01')

						graph = new Graph({
								container: container,
								width: 1200,
								height: 600,
								background: {
										color: '#fffbe6', // 设置画布背景颜色
								},
								grid: {
										size: 10,      // 网格大小 10px
										visible: true, // 渲染网格背景
								},
								panning: true,//允许拖拽
						})
						graph.fromJSON(data);
				})
				const clickZoom = (size) => {
						// 放大：正数
						// 缩小：负数
						graph.zoom(size)
				}
				const clickTranslate = () => {
						// 平移
						graph.translate(80, 40)
				}
				return {
						clickZoom,
						clickTranslate
				}
		}
})
</script>

<style scoped>
.contentBox {
		display: flex;
		flex-direction: column;
		align-items: center;
}

.btnBox {
		margin: 10px 0;
}
</style>